<template>
  <div class="word-actions">
    <el-button 
      size="small" 
      type="primary" 
      @click="playPronunciation('uk')"
      :disabled="!isPronunciationAvailable(word)"
    >
      <el-icon><Headset /></el-icon>
      英式发音
    </el-button>
    
    <el-button 
      size="small" 
      type="success" 
      @click="playPronunciation('us')"
      :disabled="!isPronunciationAvailable(word)"
    >
      <el-icon><Headset /></el-icon>
      美式发音
    </el-button>
    
    <el-button 
      size="small" 
      :type="word.ok === 'YES' ? 'warning' : 'info'"
      @click="toggleWordStatus"
    >
      {{ word.ok === 'YES' ? '标记为未掌握' : '标记为已掌握' }}
    </el-button>
    
    <el-tag 
      v-if="word.ielst === 'YES'" 
      type="success" 
      size="small"
      effect="dark"
    >
      雅思词汇
    </el-tag>
  </div>
</template>

<script>
import { updateWordStatus } from '../utils';
import pronunciationUtils from '../utils/pronunciationUtils';
import { Headset } from '@element-plus/icons-vue';

export default {
  name: 'WordActions',
  components: {
    Headset
  },
  props: {
    word: {
      type: Object,
      required: true
    }
  },
  emits: ['pronunciation-play', 'status-updated'],
  methods: {
    isPronunciationAvailable(word) {
      return pronunciationUtils.isPronunciationAvailable(word);
    },

    async playPronunciation(type) {
      const result = await pronunciationUtils.playPronunciation(
        this.word, 
        type, 
        {
          success: (msg) => this.$message.success(msg),
          error: (msg) => this.$message.error(msg),
          warning: (msg) => this.$message.warning(msg)
        }
      );
      
      if (result.success) {
        this.$emit('pronunciation-play', { word: this.word, type });
      }
    },

    async toggleWordStatus() {
      const originalStatus = this.word.ok;
      await updateWordStatus(this.word, {
        success: (msg) => this.$message.success(msg),
        error: (msg) => this.$message.error(msg)
      });
      
      if (this.word.ok !== originalStatus) {
        this.$emit('status-updated', { word: this.word, newStatus: this.word.ok });
      }
    }
  }
};
</script>

<style scoped>
.word-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
</style>
